<template>
    <div class="pad">
        <!-- search start -->
        <!--<searchBar @handleSearch="init"/>-->
        <!-- search end -->
        <!-- table start -->
        <tableDataEl
            :page.sync="page"
            :pageSize="pageSize"
            :tableData="tableData.list"
            :tableLabel="tableLabel"
            :pageCount="tableData.rows"
            ImgText="支付凭证"
            v-loading="loading"
            @viewsRegions="viewsRegions"
            @handleDetail="handleDetail"
            height="89vh"
        />
        <!-- table end -->
        <!-- dialog start -->
        <el-dialog
            :visible.sync="isShowRegions"
            center
            title="区域"
            width="30%"
            v-el-drag-dialog
        >
            <el-table
                :data="regionsData"
                border
                height="250"
                v-loading="regionsLoading"
            >
                <el-table-column
                    label="省"
                    prop="name"
                    align="center"
                />
                <el-table-column
                    label="市"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{scope.row['children'][0]['name']}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="区"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{scope.row['children'][0]['children'][0]['name']}}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- detail dialog start -->
        <el-dialog
            :visible.sync="isShowDetail"
            center
            title="详情"
            width="35%"
            top="10vh"
            v-el-drag-dialog
        >
            <div v-loading="detailLoading">
                <el-form
                    label-width="120px"
                    label-position="left"
                >
                    <el-form-item label="运营商利润:">
                       <el-input disabled :value="detailData.profit" size="small">
                           <template slot="append">
                               %
                           </template>
                       </el-input>
                    </el-form-item>
                    <el-form-item label="推荐人:">
                        <el-input disabled :value="detailData.share_name" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="供应商:">
                        <el-input disabled :value="detailData.sm_user" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="送货延迟罚款:">
                        <el-input disabled :value="detailData.delay_fine" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="维修厂工时费:">
                        <el-input disabled :value="detailData.shop_hours" size="small"></el-input>
                    </el-form-item>
                </el-form>
                <el-table
                    :data="detailData.detail"
                    border
                    height="290"
                >
                    <el-table-column label="物料信息" align="center">
                        <el-table-column
                            label="油品名称"
                            prop="materiel"
                            align="center"
                        />
                        <el-table-column
                                label="数量"
                                prop="num"
                                align="center"
                        />
                        <el-table-column
                            label="备注"
                            prop="remarks"
                            align="center"
                        />
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
        <!-- dialog end -->
    </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'
    export default {
        name: "throughdownList",
        components: {
            tableDataEl
        },
        data () {
            return {
                page: 1,
                pageSize: 8,
                tableData: {},
                tableLabel: [
                    {
                        label: '运营商名称',
                        prop: 'company'
                    },
                    {
                        label: '联系方式',
                        prop: 'phone'
                    },
                    {
                        label: '负责人',
                        prop: 'leader'
                    },
                    {
                        label: '支付凭证',
                        prop: 'usecost',
                        image: true
                    },
                    {
                        label: '区域',
                        prop: 'regions',
                        detail: true,
                        methodName: 'viewsRegions'

                    },
                    {
                        label: '申请时间',
                        prop: 'create_time'
                    },
                    {
                        label: '审核时间',
                        prop: 'audit_time'
                    },
                    {
                        label: '查看详情',
                        detail: true,
                        btnText: '查看',
                        methodName: 'handleDetail'
                    }
                ],
                loading: false,
                isShowRegions: false,
                regionsData: [],
                regionsLoading: false,
                isShowDetail: false,
                detailData: {},
                wlInfo:[],
                detailLoading: false
            }
        },
        methods: {
            async init () { //初始化
                this.loading = true;
                // let paramsStr = Object.assign(search, {page: this.page, pageSize: this.pageSize})
                let res = await this.api.log_o_passList({page: this.page, pageSize: this.pageSize});
                res.code ? this.tableData = res.data : this.$message(res.msg);
                this.loading = false;
            },
            async viewsRegions (...value) {  //查看区域
                this.regionsLoading = true;
                this.isShowRegions = true;
                let res = await this.api.detailArea({id: value[1]['id']});
                if(res.code) {
                    this.regionsData = typeof res.data === 'string' ? [] : res.data;
                    this.regionsLoading = false;
                } else this.$message(res.msg);
            },
            async handleDetail (...value) { //查看详情
                this.isShowDetail = true;
                this.detailLoading = true;
                let res = await this.api.applicationDetail({id: value[1]['id'], aid: value[1]['aid']});
                let res1 = await this.api.getOilForDetail({id: value[1]['id']});

                if(res.code && res1.code) {
                    this.detailData = Object.assign(res.data,res1.data);
                    this.detailLoading = false;
                } else this.$message('请求出错！');
            }
        },
        mounted () {
            this.init();
        },
        watch: {
            page () {
                this.init()
            },
            pageSize () {
                this.init()
            }
        }
    }
</script>

<style scoped>
    .pad {
        padding: 10px;
    }
    .el-form-item {
        margin-bottom:10px;
    }
</style>
